---
title: "Drawer"
description: A slide-in panel that provides additional navigation or content without disrupting the main interface, ideal for side menus and overlays.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Modalhtml#props", "https://motion.dev/animate-presence"]
---



## Basic
A slide-in overlay for additional content or actions, anchored to the screen edge for quick access. Originally built by **Devon Govett**. Check out [his tweet](https://x.com/devongovett/status/1674470185783402496) for more insights.
Want to enhance it, like making the drawer height adapt to its content? Contributions are welcome. Send a [PR](https://github.com/intentui/intentui)!
<How toUse="overlays/drawer/drawer-basic-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/drawer
```

## Composed components

<Composed components={['button', 'dialog']} />

## Manual installation

```bash
npm i react-aria-components motion
```
<SourceCode toShow="drawer" />

## Anatomy
```
import { Button } from "@/components/ui/button"
import {
  Drawer,
  DrawerBody,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"
```

```
<Drawer>
  <DrawerTrigger>Open Drawer</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Drawer Title</DrawerTitle>
      <DrawerDescription>Drawer Description</DrawerDescription>
    </DrawerHeader>
    <DrawerBody>Drawer Body</DrawerBody>
    <DrawerFooter>
      <DrawerClose>Close</DrawerClose>
      <Button>Confirm</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>
```

## Side
Use the `side` prop to change where the drawer appears. The default is `left`, but you can also use `right`, `top`, or `bottom`.
<How toUse="overlays/drawer/drawer-side-demo" />

## Float
To make the drawer float with spacing around it, set the `isFloat` prop to `true`. The default value is `false`.
<How toUse="overlays/drawer/drawer-float-demo" />

## Controlled
Manage the drawer’s open and close state programmatically.
<How toUse="overlays/drawer/drawer-controlled-demo" />

## Without notch
Remove the default notch styling by setting the `notch` prop to `false`.
<How toUse="overlays/drawer/drawer-without-notch-demo" />

## Sticky
The drawer handles long content gracefully. Try scrolling within it.
<How toUse="overlays/drawer/drawer-sticky-demo" />

## Nested
Drawers can be nested inside each other for advanced layouts.
<How toUse="overlays/drawer/drawer-nested-demo" />
